<template>
	<view class="app">
		<view class="header">
			<image src="../../static/img/向右1.png" mode="" style="transform: rotate(180deg);width: 38rpx;height: 38rpx;" @click="back">
			</image>
			<input type="search" name="search" id="search" placeholder="搜索商品零补贴 下单更省钱" v-model="keycode"
				@input="input" />
			<text style="font-size: .9rem;" @click="search">搜索</text>
		</view>
		<view v-show="show" class=""
			style="background-color: rgba(196, 89, 114, 0.1);border-radius: 20rpx;padding: 20rpx;border: 1px solid rgba(196, 89, 114, 0.8);margin-top: 30rpx;">
			<text style="font-size: 1rem;font-weight: bold;">三步领补贴</text>
			<text style="color: #888;margin-left: 20rpx;font-size: .9rem;">淘宝、京东购物可</text>
			<text style="color: deeppink;font-size: .9rem;">直接抵扣</text>
			<view class="" style="display: flex;justify-content: space-between;margin-top: 30rpx;">
				<view class="tips">
					<text>1</text>
					<view class="">
						<text>打开\n</text>
						<text>找到要购买的商品</text>
					</view>
				</view>
				<view class="tips">
					<text>2</text>
					<view class="">
						<text>长按商品标题\n</text>
						<text>点击“拷贝”标题</text>
					</view>
				</view>
				<view class="tips">
					<text>3</text>
					<view class="">
						<text>返回柚子街\n</text>
						<text>领取商品补贴</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="show" class="hotSearch">
			<view class="" style="display: flex;align-items: center;">
				<image src="../../static/img/分类-热门.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
				<text style="font-weight: bold;margin-left: 10rpx;">热门搜索</text>
			</view>
			<view class="" style="display: flex;flex-wrap: wrap;margin-top: 10rpx;">
				<view class="" v-for="(item,index) in hotSearch"
					style="width: 50%;margin: 10rpx 0;font-size: .9rem;display: flex;" @click="checkHot(item.key)">
					<view
						style="background-color: palevioletred;width: 36rpx;color: white;border-radius: 6rpx;font-size: .7rem;display: flex;align-items: center;justify-content: center">
						{{index+1}}
					</view>
					<text style="margin-left: 10rpx;">{{item.key}}</text>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;" v-show="showHistory">
			<text style="font-weight: bold;">搜索记录</text>
			<view class="" style="margin-top: 20rpx;">
				<text v-for="item in history"
					style="background-color: white;margin: 0 6rpx;font-size: .8rem;padding: 4rpx 16rpx;border-radius: 10rpx;color: #484848;"
					@click="keycode=item;search()">{{item}}</text>
			</view>
		</view>
		<!--  -->
		<view class="result" v-show="!show">
			<view class="" v-for="item in result" style="display: flex;margin: 20rpx 0;" @click="move(item)">
				<view class="">
					<image lazy-load :src="item.img" mode="" style="width: 180rpx;height: 180rpx;border-radius: 10rpx;">
					</image>
				</view>
				<view class=""
					style="margin-left: 18rpx;font-size: .9rem;display: flex;flex-direction: column;justify-content: space-between;flex: 1;">
					<text>{{item.title}}</text>
					<view class="" style="display: flex;justify-content: space-between;">
						<text style="color: red;font-weight: bold;font-size: .9rem;">￥{{item.price}}</text>
						<text style="color: #888;">销量：{{item.sales}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSearch: Object,
				keycode: "",
				result: Object,
				show: true,
				history: Object,
				showHistory: true
			};
		},
		onLoad() {
			if (localStorage.getItem("keycode") == null) {
				localStorage.setItem("keycode", "[]")
				this.showHistory = false
			} else {
				this.history = JSON.parse(localStorage.getItem("keycode"))
				this.showHistory = true
			}
			uni.request({
				url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/search/hot",
				success: (res) => {
					this.hotSearch = res.data.data
				}
			})
		},
		methods: {
			checkHot(keycode) {
				this.keycode = keycode
				this.getResult()
			},
			back(){
				uni.navigateBack()
			},
			input() {
				if (this.keycode.length == 0) {
					this.show = true
					this.showHistory = true
				}
			},
			search() {
				this.getResult()
			},
			getResult() {
				this.result = []
				this.show = false
				this.showHistory = false
				let data = JSON.parse(localStorage.getItem("keycode"))
				if (data.indexOf(this.keycode) != -1) {
					data.splice(data.indexOf(this.keycode), 1)
					data.unshift(this.keycode)
				} else {
					data.unshift(this.keycode)
				}
				localStorage.setItem("keycode", JSON.stringify(data))
				this.history = JSON.parse(localStorage.getItem("keycode"))
				uni.request({
					url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/search/v2/product-query",
					method: "POST",
					data: {
						"key": this.keycode,
						"leafNodeId": [],
						"maxPrice": "2147483647",
						"minPrice": "0",
						"pageIndex": 1,
						"pageSize": 20,
						"searchType": 0,
						"sort": 1,
						"stillSearch": false
					},
					success: (res) => {
						this.result = res.data.data.products
					}
				})
			},
			move(item) {
				uni.navigateTo({
					url: './shopInfo/shopInfo?pid=' + item.productId
				})
			}
		}
	}
</script>

<style lang="less">
	.app {
		padding: 20rpx;
		background-color: var(--bgcolor);
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#search {
		background-color: white;
		font-size: .9rem;
		padding: 10rpx 60rpx;
		position: relative;
		border-radius: 18rpx;
		width: 66%;

		&::before {
			content: "";
			display: block;
			background: url("../../static/img/搜索.png") no-repeat;
			background-size: 100%;
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			left: 18rpx;
			top: 12rpx;
		}
	}

	.tips {
		display: flex;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 1.6rem;
			color: deeppink;
			font-weight: bold;
		}

		view {
			font-size: .72rem;
			margin-left: 16rpx;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				color: #888;
			}
		}
	}

	.hotSearch {
		padding: 18rpx;
		border: 1px solid rgba(196, 89, 114, 0.8);
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
</style>